import Link from 'next/link'
import { NextPage } from 'next'
import { useRouter } from 'next/router'
import styled from 'styled-components'

const Title = styled.h1`
  color: green;
`
const About:NextPage = () => {
  const router = useRouter()
  const gotoAbout = () => {
    router.push('/news')
  }
  return (
    <div>
      <Title>About page</Title>
      <div>
        <Link href="/news?id=xxx">
          <span>news</span>
        </Link>
        {/* <Link href={{ pathname: '/about', query: { name: 'jackylin' } }}>
          <a>news</a>
        </Link> */}
      </div>
      <div className="header-bar">Header</div>
      <style jsx>
        {`
          .header-bar {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: lightblue;
            text-align: center;
          }
        `}
      </style>
      <div>
        <button type="button" onClick={gotoAbout}>新闻</button>
      </div>
    </div>
  )
}
export default About
